{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>卡片</li>
  </ol>
<section class="demo-section">
<div id="pageContent">

<style>
.example-cards {padding-bottom: 0;}
.example-cards > .card {width: 300px; max-width: 100%; margin-bottom: 20px;}
.example-cards > .cards-condensed {margin-bottom: 20px}
</style>

<article><p>卡片视图使用网格（栅格）来集中展示一组卡片。</p></article>






<section><header><h3>结构</h3></header><article><p>卡片视图使用 <code>.cards</code> 类作为父级容器。因为 <code>.cards</code> 实际上具备栅格中的 <code>.row</code> 的行为，所有可以直接在 <code>.cards</code> 内包含 <code>.col-*</code> 来以栅格创建卡片排列布局。</p><p>卡片 <code>.card</code> 也可以单独使用，而不需要包含在 <code>.cards</code> 容器元素中。</p><p>通常卡片视图的 HTML 结构如下：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cards"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;</span><span class="pln">
      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img4.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="com">&lt;!-- ... 更多的 .col-md-4 来包含卡片 --&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><div class="alert alert-primary-inverse">
  <h4>提示</h4>
  <p>为了方便用户创建多种尺寸的卡片，并没有限定卡片的高度，但为保证卡片视图排列正常，需要确保每个卡片的高度一致。</p>
</div></article></section>



<section><header><h3>简单示例</h3></header><article><div class="example-cards example">
  <div class="cards">
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <div class="card"><img src="__IMG__/320x320icon.png" alt=""></div>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cards"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img3.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img4.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img5.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img3.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre></article></section>

































<section><header><h3>卡片内容类型</h3></header><article><p>卡片 <code>.card</code> 内可以包含各种内容，可以直接包含元素类型包括：</p><ul>
<li><code>&lt;img&gt;</code></li>
<li><code>.media-wrapper</code>，用来包裹 <code>&lt;img&gt;</code></li>
<li><code>.card-heading</code>，卡片标题容器</li>
<li><code>.card-content</code>，卡片文本内容容器</li>
<li><code>.card-actions</code>，卡片操作按钮容器</li>
<li><code>.caption</code>，覆盖文本容器</li>
</ul><p>如果在 <code>&lt;a&gt;</code> 元素上添加 <code>.card</code> 类则得到一个可以点击的卡片。</p><h4>仅图片</h4><div class="example-cards example">
  <div class="card">
    <img src="__IMG__/320x320icon.png" alt="">
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img3.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><h4>链接</h4><div class="example-cards example">
  <a class="card" href="###">
    <img src="__IMG__/320x320icon.png" alt="">
  </a>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"path/to/card/detail/content"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;/a&gt;</span></code></pre><h4>标题与文字</h4><div class="example-cards example">
  <a class="card" href="###">
    <img src="__IMG__/320x320icon.png" alt="">
    <div class="card-heading"><strong>良辰美景</strong></div>
    <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
  </a>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/a&gt;</span></code></pre><h4>包含按钮</h4><div class="example-cards example">
  <a class="card" href="###">
    <img src="__IMG__/320x320icon.png" alt="">
    <div class="card-heading"><strong>良辰美景</strong></div>
    <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
    <div class="card-actions">
      <button type="button" class="btn btn-danger"><i class="icon-heart"></i> 喜欢</button>
      <div class="pull-right text-danger"><i class="icon-heart-empty"></i> 520 人喜欢</div>
    </div>
  </a>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-actions"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-danger"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-heart"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 喜欢</span><span class="tag">&lt;/button&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right text-danger"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-heart-empty"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 520 人喜欢</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/a&gt;</span></code></pre><h4>包含标签</h4><div class="example-cards example">
  <a class="card" href="###">
    <img src="__IMG__/320x320icon.png" alt="">
    <div class="card-heading"><strong>良辰美景</strong></div>
    <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
    <div class="card-actions">
      <span class="label label-warning">牡丹亭</span>
      <div class="pull-right"><i class="icon-comments-alt"></i> 520</div>
    </div>
  </a>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-actions"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;span</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"label label-warning"</span><span class="tag">&gt;</span><span class="pln">牡丹亭</span><span class="tag">&lt;/span&gt;</span><span class="pln">
    </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"pull-right"</span><span class="tag">&gt;&lt;i</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"icon-comments-alt"</span><span class="tag">&gt;&lt;/i&gt;</span><span class="pln"> 520</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/a&gt;</span></code></pre><h4>覆盖文本</h4><p>可以在 <code>.card</code> 内包含一个 <code>.caption</code> 用来展示覆盖文本。覆盖文本将在光标悬停在卡片上时滑动展现，光标离开卡片时隐藏。</p><div class="example-cards example">
  <a class="card" href="###">
    <img src="__IMG__/320x320icon.png" alt="">
    <div class="caption">“良辰美景” 出自《牡丹亭》</div>
    <div class="card-heading"><strong>良辰美景</strong></div>
    <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
  </a>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/a&gt;</span></code></pre><h4>使用 <code>.media-wrapper</code> 容器</h4><p>为图片增加 .media-wrapper 容器，用来为图标固定尺寸和设置特殊效果。</p><div class="example-cards example">
  <a class="card" href="###">
    <div class="media-wrapper">
      <img src="__IMG__/320x320icon.png" alt="">
    </div>
    <div class="caption">“良辰美景” 出自《牡丹亭》</div>
    <div class="card-heading"><strong>良辰美景</strong></div>
    <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
  </a>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"media-wrapper"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/a&gt;</span></code></pre></article></section>






<section><header><h3>无边框视图</h3></header><article><p>为 <code>.cards</code> 添加 <code>.cards-borderless</code> 类来移除卡片的边框。</p><div class="example-cards example">
  <div class="cards cards-borderless">
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
  </div>
</div><pre class="pre-scrollable linenums prettyprint prettyprinted" style=""><ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cards cards-borderless"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img5.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img4.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img3.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img5.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section>






<section><header><h3>紧凑视图</h3></header><article><p>为 <code>.cards</code> 添加 <code>.cards-condensed</code> 类可以得到更为紧凑的视图，卡片之间将没有间距。</p><div class="example-cards example">
  <div class="cards cards-condensed">
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
    <div class="col-md-4 col-sm-6 col-lg-3">
      <a class="card" href="###">
        <img src="__IMG__/320x320icon.png" alt="">
        <div class="caption">“良辰美景” 出自《牡丹亭》</div>
        <div class="card-heading"><strong>良辰美景</strong></div>
        <div class="card-content text-muted">良辰美景奈何天，赏心乐事谁家院。</div>
      </a>
    </div>
  </div>
</div>
<pre class="pre-scrollable linenums prettyprint prettyprinted" style="">
	<ol class="linenums"><li class="L0"><code class="lang-html"><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cards cards-condensed"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img5.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img4.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img3.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img2.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img1.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L6"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L7"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"col-md-4 col-sm-6 col-lg-3"</span><span class="tag">&gt;</span></code></li><li class="L8"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;a</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card"</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"###"</span><span class="tag">&gt;</span></code></li><li class="L9"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"docs/img/img5.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;</span></code></li><li class="L0"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"caption"</span><span class="tag">&gt;</span><span class="pln">“良辰美景” 出自《牡丹亭》</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L1"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-heading"</span><span class="tag">&gt;&lt;strong&gt;</span><span class="pln">良辰美景</span><span class="tag">&lt;/strong&gt;&lt;/div&gt;</span></code></li><li class="L2"><code class="lang-html"><span class="pln">      </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"card-content text-muted"</span><span class="tag">&gt;</span><span class="pln">良辰美景奈何天，赏心乐事谁家院。</span><span class="tag">&lt;/div&gt;</span></code></li><li class="L3"><code class="lang-html"><span class="pln">    </span><span class="tag">&lt;/a&gt;</span></code></li><li class="L4"><code class="lang-html"><span class="pln">  </span><span class="tag">&lt;/div&gt;</span></code></li><li class="L5"><code class="lang-html"><span class="tag">&lt;/div&gt;</span></code></li></ol></pre></article></section></div>


</section>
{/block}